<template>
  <div>
    <div class="head f-row ai-c" v-if="rateData">
      <div class="total_score">{{ Number(rateData.gradeAvg) }}</div>
      <div class="praise_rate pt-re">
        <div class="praise_rate_num">
          好评{{
            rateData.goodsEvRate ? rateData.goodsEvRate * 100 + "%" : "0%"
          }}
        </div>

        <!-- 
          middleReceived wellReceived negativeReceived
         -->
        <el-rate v-model="rateData.gradeAvg" disabled text-color="#ff9900">
        </el-rate>
      </div>
      <div class="praise_fist rate_box">
        <div class="f-row ai-c">
          <div class="left_btn mr-1">全部{{ rateData.evTotalCount }}</div>
          <el-progress :percentage="100" color="#fca63a"></el-progress>
        </div>
        <div class="f-row ai-c">
          <div class="left_btn mr-1">中评{{ rateData.midEvCount }}</div>
          <el-progress
            :percentage="rateData.midEvRate * 100"
            color="#fca63a"
          ></el-progress>
        </div>
      </div>
      <div class="praise_fist rate_box">
        <div class="f-row ai-c">
          <div class="left_btn mr-1">好评{{ rateData.goodsEvCount }}</div>
          <el-progress
            :percentage="rateData.goodsEvRate * 100"
            color="#fca63a"
          ></el-progress>
        </div>
        <div class="f-row ai-c">
          <div class="left_btn mr-1">差评{{ rateData.badEvCount }}</div>
          <el-progress
            :percentage="rateData.badEvRate * 100"
            color="#fca63a"
          ></el-progress>
        </div>
      </div>
    </div>
    <div class="patient_eva" v-if="commentData">
      <div v-for="(i, k) in commentData" :key="k">
        <div class="f-row list">
          <div class="left_avatar">
            <el-avatar
              :size="60"
              :src="
                i.evaluaterFace ||
                'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
              "
            ></el-avatar>
          </div>
          <div class="right_box">
            <div class="patient pt-re">
              <div class="f-row ai-c">
                <div class="iname">{{ i.userName }}</div>
                <el-rate
                  v-model="i.grade"
                  disabled
                  text-color="#ff9900"
                  show-score
                >
                </el-rate>
              </div>
              <div class="content">
                {{ i.userEvaluate }}
              </div>
              <div class="time">{{ i.userEvaluateTime }}</div>
            </div>
            <div class="dz_box f-row ai-c jc-fe">
              <div class="f-row ai-c mr-2 cp" @click="dz_comment(i.id, k)">
                <img
                  src="../../assets/images/others/dz.png"
                  alt="点赞"
                  title="点赞"
                />
                <span>{{ i.likes }}</span>
              </div>
              <div class="f-row ai-c cp" @click="pl_comment(i.id)">
                <img
                  src="../../assets/images/others/pl.png"
                  alt="回复"
                  title="回复"
                />
                <span>{{ i.childCount }}</span>
              </div>
            </div>
          </div>
          <div
            class="cp more"
            v-if="i.child.length > 0 && currentChild != i.id"
            @click.stop="moreComment(i.id)"
          >
            查看更多评论
          </div>
        </div>
        <div class="cp answer" v-if="currentAnswer == i.id">
          <div>
            <el-input
              type="textarea"
              :rows="2"
              :placeholder="'回复' + i.userName"
              v-model="textarea"
            >
            </el-input>
          </div>
          <div class="pt-re">
            <div
              class="btn-deep cp"
              @click="saveFirstComment(i.courseSeriesId, i.id)()"
            >
              回复
            </div>
          </div>
        </div>
        <div class="chilre" v-if="currentChild == i.id">
          <div v-for="(item, key) in i.child" :key="key">
            <div class="f-row list">
              <div class="left_avatar">
                <el-avatar
                  :size="60"
                  :src="
                    item.evaluaterFace ||
                    'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
                  "
                ></el-avatar>
              </div>
              <div class="right_box">
                <div class="patient pt-re">
                  <div class="f-row ai-c">
                    <div class="iname">
                      {{ item.userName }}回复{{ item.replyToName }}
                    </div>
                    <!-- <el-rate
                      v-model="item.grade"
                      disabled
                      text-color="#ff9900"
                      show-score
                    >
                    </el-rate> -->
                  </div>
                  <div class="content">
                    {{ item.userEvaluate }}
                  </div>
                  <div class="time">{{ item.userEvaluateTime }}</div>
                </div>
                <div class="dz_box f-row ai-c jc-fe">
                  <div
                    class="f-row ai-c mr-2 cp"
                    @click="two_dz_comment(k, item.id, key)"
                  >
                    <img
                      src="../../assets/images/others/dz.png"
                      alt="点赞"
                      title="点赞"
                    />
                    <span>{{ item.likes }}</span>
                  </div>
                  <div class="f-row ai-c cp" @click="pl_comment(item.id)">
                    <img
                      src="../../assets/images/others/pl.png"
                      alt="回复"
                      title="回复"
                    />
                    <span>{{ item.childCount }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="cp answer" v-if="currentAnswer == item.id">
              <div>
                <el-input
                  type="textarea"
                  :rows="2"
                  :placeholder="'回复' + item.userName"
                  v-model="textarea"
                >
                </el-input>
              </div>
              <div class="pt-re">
                <div
                  class="btn-deep cp"
                  @click="saveTwoComment(item.courseSeriesId, item.id)"
                >
                  回复
                </div>
              </div>
            </div>
          </div>
          <div
            class="cp txt-c"
            v-if="currentChild"
            @click.stop="currentChild = null"
          >
            收起评论
          </div>
        </div>
      </div>
    </div>
    <span v-if="commentData.length == 0">暂无数据</span>
    <div class="txt-c mt-1 cp" ref="showmore" @click="nextpage">
      {{ next_text }}
    </div>
  </div>
</template>
<script>
import { putfabulous, answerComment } from "@/request/api";
import { mapState } from "vuex";
export default {
  props: {
    commentData: Array, //评论列表
    rateData: Object, //评分数据
    total: Number, //评论数量
    next_text: String, //加载更多文字
  },
  data() {
    return {
      textarea: null,
      currentAnswer: null, //当前回复
      currentChild: null, //当前二级目录
      rate: 1,
      list: [],

      page: 1,

      isDetele: false,
      timer: null,
    };
  },

  mounted() {},
  methods: {
    //展开更多评论
    moreComment(id) {
      this.currentChild = id;
    },
    //一级点赞
    dz_comment(id, k) {
      putfabulous(id).then((res) => {
        if (res.code == 200) {
          this.commentData[k].likes = Number(this.commentData[k].likes) + 1;
        }
      });
    },
    //二级点赞
    two_dz_comment(key, id, k) {
      putfabulous(id).then((res) => {
        if (res.code == 200) {
          this.commentData[key].child[k].likes =
            Number(this.commentData[key].child[k].likes) + 1;
        }
      });
    },
    //展开一级评论
    pl_comment(id) {
      this.currentAnswer = this.currentAnswer == id ? null : id;
    },
    //保存一级评论
    saveFirstComment(courseSeriesId, id) {
      if (this.timer) return;
      this.timer = setTimeout(() => {
        answerComment({
          courseSeriesId: courseSeriesId,
          evaluateType: 1,
          userEvaluate: this.textarea,
          pid: id,
        }).then((res) => {
          clearTimeout(this.timer)
          if (res.code == 200) {
            this.currentAnswer = null;
            this.currentChild = null;
            this.textarea = "";
            this.$emit("answerSuccess");
          }
        });
      },1000);
    },
    //保存二级评论
    saveTwoComment(courseSeriesId, id) {
      answerComment({
        courseSeriesId: courseSeriesId,
        evaluateType: 1,
        userEvaluate: this.textarea,
        pid: id,
      }).then((res) => {
        this.currentAnswer = null;
        this.currentChild = null;
        this.textarea = "";
        this.$emit("answerSuccess");
      });
    },
    //更多
    nextpage() {
      if (this.page * 10 <= this.total) {
        this.$emit("nextPage");
      } else {
        this.$emit("nomore");
      }
    },
  },
};
</script>
<style scoped lang="less">
.answer {
  width: calc(100% - 6.25rem);
  padding: 2rem;
  margin-left: 6.25rem;
  .btn-deep {
    margin-top: 1rem;
    position: absolute;
    right: 0;
  }
}
.chilre {
  background-color: #f9f9f9;
  zoom: 0.8;
  > div {
    padding: 2rem 5rem;
  }
}
.more {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.dz_box {
  img {
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
  }
}
.reply {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbcbcb;
  font-size: 0.875rem;
}
.del {
  position: absolute;
  right: 1.375rem;
  top: 50%;
  transform: translateY(-50%);
  color: #cbcbcb;
  font-size: 0.875rem;
}
.doctor_reply_content {
  font-size: 0.875rem;
  margin: 1.1875rem 0 1.125rem;
  color: #787878;
}
.doctor_reply_title {
  font-weight: 500;
  color: #070a0c;
}
.doctor {
  background: #f9f9f9;
  border-radius: 0.25rem;
  padding: 1.1875rem 1.625rem;
  margin-top: 1.25rem;
}
.list {
  border-bottom: 0.0625rem solid #ececec;
  padding: 1.25rem 0;
  position: relative;
}
.time {
  font-size: 0.75rem;
  color: #cbcbcb;
}
.content {
  margin: 1rem 0 0.8125rem;
  font-size: 0.875rem;
  color: #787878;
}
.iname {
  color: #070a0c;
  line-height: 1.5rem;
  margin-right: 2.5rem;
}
.right_box {
  margin-left: 0.9375rem;
  width: calc(100% - 6.25rem);
}
.head {
  margin-bottom: 4.375rem;
}
.rate_box {
  display: grid;
  grid-row-gap: 1.3125rem;
  margin-left: 2.8125rem;
  width: 25rem;
}
.left_btn {
  font-size: 0.75rem;
  color: #8e8e8e;
  line-height: 1.5rem;
  background: #f0f0f0;
  border-radius: 0.25rem;
  width: 4.75rem;
  text-align: center;
  height: 1.5rem;
}
.el-progress {
  width: 11.5rem;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3.125rem;
}
.total_score {
  font-size: 3.75rem;
  font-weight: bold;
  color: #181818;
  line-height: 3.25rem;
}
.praise_rate {
  .praise_rate_num {
    margin-bottom: 1.125rem;
    width: 7.275rem;
    height: 2.5rem;
    background: url("../../assets/images/others/rate_box.png") no-repeat;
    background-position: left top;
    background-size: cover;
    font-size: 0.875rem;
    color: #ffffff;
    line-height: 2.5rem;
    text-align: center;
    box-sizing: border-box;
  }
}
.el-progress {
  display: flex;
  align-items: center;
}
</style>
